<template>
    <Card :bordered="false" :dis-hover="true">
        <p slot="title" style="height: 40px">
            <Tag type="dot" color="#19be6b">今日完成接待：{{pageModel.totalSize}}位</Tag>
        </p>
        <!--<p slot="title" style="height:35px;margin-top:5px" align="right">-->
            <!--<AutoComplete-->
                    <!--clearable-->
                    <!--icon="ios-search"-->
                    <!--placeholder="姓名 / 手机 / 病历号"-->
                    <!--style="width:250px">-->
                <!--<div>-->
                <!--</div>-->
            <!--</AutoComplete>-->
        <!--</p>-->
        <!--<p v-if="datas.length === 0" align="center">-->
            <!--<img width="20%" src="@/images/noData.png"></img>-->
        <!--</p>-->
        <Form ref="formInline" :label-width="100">
            <Tabs :value="selectPane" @on-click="clickTabs">
                <TabPane label="电话随访" name="1">
                    <Row type="flex" :gutter="8">
                        <Col v-for="(item,index) in datas" :key="index" span="12">
                            <Card style="width:100%;margin-top: 5px">
                                <p style="font-size: 18px" slot="title">
                                    <Row>
                                        <Col span="12">
                                            <label>{{item.patientName}} - {{item.medicalNumber}}</label>
                                        </Col>
                                    </Row>
                                </p>
                                <a v-if="item.status === 0" href="#" slot="extra">
                                    <Tag color="#5cadff">{{item.status | statusFilter}}</Tag>
                                </a>
                                <a v-if="item.status === 1" href="#" slot="extra">
                                    <Tag color="#2d8cf0">{{item.status | statusFilter}}</Tag>
                                </a>
                                <a v-if="item.status === 2" href="#" slot="extra">
                                    <Tag color="#ff9900">{{item.status | statusFilter}}</Tag>
                                </a>
                                <a v-if="item.status === 3" href="#" slot="extra">
                                    <Tag color="#ed3f14">{{item.status | statusFilter}}</Tag>
                                </a>
                                <!--<Tabs ref="tabs" @on-click="clickTabPane">-->
                                <!--<TabPane name="1" style="font-size: 16px" label="预约详情" icon="clipboard">-->
                                <Row>
                                    <Col span="6" align="center">
                                        <p>预约类型：</p>
                                    </Col>
                                    <Col span="6">
                                        <p v-if="item.type === 1"><Tag color="#ff9900">{{item.type | typeFilter}}</Tag></p>
                                        <p v-if="item.type === 2"><Tag color="#19be6b">{{item.type | typeFilter}}</Tag></p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>预约时间：</p>
                                    </Col>
                                    <Col span="6">
                                        <p>{{item.appointment | dateTimeFormatter}}</p>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="6" align="center">
                                        <p>预约医生：</p>
                                    </Col>
                                    <Col span="6">
                                        <p>{{item.doctorName}}</p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>预约护士：</p>
                                    </Col>
                                    <Col span="6">
                                        <p>{{item.nurseName}}</p>
                                    </Col>
                                </Row>
                                <Row>
                                    <!--<Col span="6" align="center">-->
                                    <!--<p>提醒方式：</p>-->
                                    <!--</Col>-->
                                    <!--<Col span="6">-->
                                    <!--<p style="text-align: left">{{item.remind | remindFilter}}</p>-->
                                    <!--</Col>-->
                                    <Col span="6" align="center">
                                        <p>预约专家：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left">{{item.expertName | valueFilter}}</p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>处理方式：</p>
                                    </Col>
                                    <Col span="6">
                                        <p v-if="item.process === 1" style="text-align: left"><Tag color="blue">{{item.process | processFilter}}</Tag></p>
                                        <p v-if="item.process === 2" style="text-align: left"><Tag color="#ed3f14">{{item.process | processFilter}}</Tag></p>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <p>主管医生：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left">{{item.competentDoctor | valueFilter}}</p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>主管护士：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left">{{item.competentNurse | valueFilter}}</p>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <p>主管客服：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left">{{item.customerName | valueFilter}}</p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>联系方式：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left"><Tag type="border" color="green">{{item.phone | valueFilter}}</Tag></p>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <p>预约备注：</p>
                                    </Col>
                                    <Col span="18">
                                        <p style="height: 50px">{{item.note | noteFilter}}</p>
                                    </Col>
                                </Row>
                                <!--</TabPane>-->
                                <!--</Tabs>-->
                            </Card>
                        </Col>
                    </Row>
                    <Card :bordered="false" :dis-hover="true">
                        <p slot="title">&nbsp;</p>
                        <iview-page
                                :totalSize="pageModel.totalSize"
                                :pageNumber="pageModel.pageNumber"
                                :pageSize="pageModel.pageSize"
                                :pageSizeOpts="pageModel.pageSizeOpts"
                                v-on="{changePageNumber:changePageNumber,changePageSize:changePageSize}">
                        </iview-page>
                    </Card>
                </TabPane>
                <TabPane label="预约到店" name="2">
                    <Row type="flex" :gutter="8">
                        <Col v-for="(item,index) in datas" :key="index" span="12">
                            <Card style="width:100%;margin-top: 5px">
                                <p style="font-size: 18px" slot="title">
                                    <Row>
                                        <Col span="12">
                                            <label>{{item.patientName}} - {{item.medicalNumber}}</label>
                                        </Col>
                                    </Row>
                                </p>
                                <a v-if="item.status === 0" href="#" slot="extra">
                                    <Tag color="#5cadff">{{item.status | statusFilter}}</Tag>
                                </a>
                                <a v-if="item.status === 1" href="#" slot="extra">
                                    <Tag color="#2d8cf0">{{item.status | statusFilter}}</Tag>
                                </a>
                                <a v-if="item.status === 2" href="#" slot="extra">
                                    <Tag color="#ff9900">{{item.status | statusFilter}}</Tag>
                                </a>
                                <a v-if="item.status === 3" href="#" slot="extra">
                                    <Tag color="#ed3f14">{{item.status | statusFilter}}</Tag>
                                </a>
                                <!--<Tabs ref="tabs" @on-click="clickTabPane">-->
                                <!--<TabPane name="1" style="font-size: 16px" label="预约详情" icon="clipboard">-->
                                <Row>
                                    <Col span="6" align="center">
                                        <p>预约类型：</p>
                                    </Col>
                                    <Col span="6">
                                        <p v-if="item.type === 1"><Tag color="#ff9900">{{item.type | typeFilter}}</Tag></p>
                                        <p v-if="item.type === 2"><Tag color="#19be6b">{{item.type | typeFilter}}</Tag></p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>预约时间：</p>
                                    </Col>
                                    <Col span="6">
                                        <p>{{item.appointment | dateTimeFormatter}}</p>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="6" align="center">
                                        <p>预约医生：</p>
                                    </Col>
                                    <Col span="6">
                                        <p>{{item.doctorName}}</p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>预约护士：</p>
                                    </Col>
                                    <Col span="6">
                                        <p>{{item.nurseName}}</p>
                                    </Col>
                                </Row>
                                <Row>
                                    <!--<Col span="6" align="center">-->
                                    <!--<p>提醒方式：</p>-->
                                    <!--</Col>-->
                                    <!--<Col span="6">-->
                                    <!--<p style="text-align: left">{{item.remind | remindFilter}}</p>-->
                                    <!--</Col>-->
                                    <Col span="6" align="center">
                                        <p>预约专家：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left">{{item.expertName | valueFilter}}</p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>处理方式：</p>
                                    </Col>
                                    <Col span="6">
                                        <p v-if="item.process === 1" style="text-align: left"><Tag color="blue">{{item.process | processFilter}}</Tag></p>
                                        <p v-if="item.process === 2" style="text-align: left"><Tag color="#ed3f14">{{item.process | processFilter}}</Tag></p>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <p>主管医生：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left">{{item.competentDoctor | valueFilter}}</p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>主管护士：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left">{{item.competentNurse | valueFilter}}</p>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <p>主管客服：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left">{{item.customerName | valueFilter}}</p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>联系方式：</p>
                                    </Col>
                                    <Col span="6">
                                        <p style="text-align: left"><Tag type="border" color="green">{{item.phone | valueFilter}}</Tag></p>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <p>医生完成状态：</p>
                                    </Col>
                                    <Col span="6">
                                        <p v-if="item.doctorStatus === 0"><Tag color="#ff9900">{{item.doctorStatus | stateFilter}}</Tag></p>
                                        <p v-if="item.doctorStatus === 1"><Tag color="#ed3f14">{{item.doctorStatus | stateFilter}}</Tag></p>
                                        <p v-if="item.doctorStatus === 2"><Tag color="#19be6b">{{item.doctorStatus | stateFilter}}</Tag></p>
                                    </Col>
                                    <Col span="6" align="center">
                                        <p>护士完成状态：</p>
                                    </Col>
                                    <Col span="6">
                                        <p v-if="item.nurseStatus === 0"><Tag color="#ff9900">{{item.nurseStatus | stateFilter}}</Tag></p>
                                        <p v-if="item.nurseStatus === 1"><Tag color="#ed3f14">{{item.nurseStatus | stateFilter}}</Tag></p>
                                        <p v-if="item.nurseStatus === 2"><Tag color="#19be6b">{{item.nurseStatus | stateFilter}}</Tag></p>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <p>客服完成状态：</p>
                                    </Col>
                                    <Col span="6">
                                        <p v-if="item.customerStatus === 0"><Tag color="#ff9900">{{item.customerStatus | stateFilter}}</Tag></p>
                                        <p v-if="item.customerStatus === 1"><Tag color="#ed3f14">{{item.customerStatus | stateFilter}}</Tag></p>
                                        <p v-if="item.customerStatus === 2"><Tag color="#19be6b">{{item.customerStatus | stateFilter}}</Tag></p>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <p>预约备注：</p>
                                    </Col>
                                    <Col span="18">
                                        <p style="height: 50px">{{item.note | noteFilter}}</p>
                                    </Col>
                                </Row>
                                <!--</TabPane>-->
                                <!--</Tabs>-->
                            </Card>
                        </Col>
                    </Row>
                    <Card :bordered="false" :dis-hover="true">
                        <p slot="title">&nbsp;</p>
                        <iview-page
                                :totalSize="pageModel.totalSize"
                                :pageNumber="pageModel.pageNumber"
                                :pageSize="pageModel.pageSize"
                                :pageSizeOpts="pageModel.pageSizeOpts"
                                v-on="{changePageNumber:changePageNumber,changePageSize:changePageSize}">
                        </iview-page>
                    </Card>
                </TabPane>
            </Tabs>
        </Form>
    </Card>
</template>

<script>
    import iviewButton from '@/view/common/button/Button.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    export default {
        name: 'text-editor',
        components: {
            iviewButton,
            iviewPage
        },
        data () {
            return {
                menuId: 2000,
                baseURL: '/user/reservation',
                selectRows: [],
                selectRow: {},
                datas: [],
                buttons: [],
                selectPane: '1',
                pageModel: {
                    totalSize: 0,
                    pageNumber: 1,
                    pageSize: 10,
                    pageSizeOpts: [10, 50, 100]
                }
            };
        },
        filters: {
            statusFilter (value) {
                let temp = ''
                if (value === 0) {
                    temp = '已预约'
                } else if (value === 1) {
                    temp = '已回访'
                } else if (value === 2) {
                    temp = '已到场'
                } else if (value === 3) {
                    temp = '已接诊'
                }
                return temp
            },
            stateFilter (value) {
                let temp = ''
                if (value === 0) {
                    temp = '未完成'
                } else if (value === 1) {
                    temp = '治疗中'
                } else if (value === 2) {
                    temp = '已完成'
                }
                return temp
            },
            typeFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '复诊'
                } else if (value === 2) {
                    temp = '新诊'
                }
                return temp
            },
            remindFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '短信'
                } else if (value === 2) {
                    temp = '微信'
                } else if (value === 3) {
                    temp = '电话'
                }
                return temp
            },
            processFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '电话随访'
                } else if (value === 2) {
                    temp = '预约到店'
                }
                return temp
            },
            valueFilter (value) {
                let temp = value
                if (!temp || temp === null || temp ==='NULL' || temp === '') {
                    return '无'
                }
                return temp
            },
            noteFilter (value) {
                let temp = value
                if (temp === '') {
                    temp = '未填写'
                }
                return temp
            }
        },
        methods: {
            events (item, row) {
            },
            clickTabs (name) {
                this.pageModel.pageNumber = 1
                this.pageModel.pageSize = 10
                this.selectPane = name
                this.refresh()
            },
            refresh () {
                this.search()
            },
            search () {
                let url = this.baseURL + '/complete'
                this.$ajax.post(url, {
                    process: this.selectPane,
                    queryModel: {
                        pageNumber: this.pageModel.pageNumber,
                        pageSize: this.pageModel.pageSize
                    }
                }).then((response) => {
                    let {code, data, params, msg} = response.data
                    if (code === 0) {
                        this.datas = data
                        this.pageModel.pageNumber = params.pageNumber
                        this.pageModel.pageSize = params.pageSize
                        this.pageModel.totalSize = params.totalSize
                        this.$emit('getData3', data.length)
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            init () {
                // 加载按钮组
                this.loadButton()
                // 查询
                // this.search();
            },
            loadButton () {
                this.$ajax.get('/user/buttons/' + this.menuId).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.buttons = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            changeSelect (rows) {
                this.selectRows = rows
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
                this.refresh()
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
                this.refresh()
            }
        },
        mounted () {
            this.init()
        }
    }
</script>

<style>
</style>
